<template>
  <div class="h-100">
    <!-- 高 636px  -->
    <div class="flex justify-between" style="height:48.29%">
      <div data-bottom class="second-sides">1</div>
      <div data-bottom class="second-sides">1</div>
      <div data-bottom class="second-sides">3</div>
    </div>
    <!-- 高 20px -->
    <div style="height:2.14%" />
    <!-- 高 607px -->
    <div class="flex justify-between" style="height:48.29%">
      <div data-bottom class="second-sides">1</div>
      <div data-bottom class="second-sides">1</div>
      <div data-bottom class="second-sides">3</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AgriculturalEconomy',
  components: {},
  data() {
    return {
      menuLevel: 1
    }
  }
}
</script>

<style lang="scss" scoped>
.second-center {
  width: 47.87%;
  height: 100%;
  background-size: 100% 100% !important;
}
.second-sides {
  width: 32.7%;
  height: 100%;
  background-size: 100% 100% !important;
}
.second-center[data-top] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.second-center[data-bottom] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.second-sides[data-top] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.second-sides[data-bottom] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
</style>
